{% load time_filters %}
<div class="col-md-4">
    
  {% if read_post %}
  <div class="row ml-1 mt-4" style="background-color: white">
    <div class="col-sm-12 mt-4">
      <p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">
        Peekpa 阅读排行榜
      </p>
    </div>
  </div>
  <div class="row ml-1" style="background-color: white">
    <ul class="col-sm-12 d-block">
      {% for post in read_post %}
      <li
        class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom "
        style="height: 100px;"
      >
        <div class="col-sm-5 pl-0 h-100">
          <a
            href="{% url 'post:detail' time_id=post.time_id %}"
            class="w-100 h-100"
          >
            <img src="{{ post.thumbnail }}" class="w-100 h-100" />
          </a>
        </div>
        <div class="col-sm-7 d-flex flex-column pl-0 pr-0 mt-1">
          <p class="h6" style="font-size: .9rem" title="">
            <a
              href="{% url 'post:detail' time_id=post.time_id %}"
              class="text-decoration-none text-dark"
              >{{ post.title | slice:':20'}}</a
            >
          </p>
          <div class="d-flex flex-row justify-content-between mt-auto">
            <p class="font-weight-light small mb-0">阅读({{ post.read_num }})</p>
            <p class="font-weight-light small mb-0">{{  post.publish_time | data_format_y_m_d  }}</p>
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
  </div>